<script setup lang="ts">
import { h, ref } from 'vue';

import { Page } from '@vben/common-ui';
import { MdiDelete, MdiEdit, MdiPlus } from '@vben/icons';

import {
  Button,
  Card,
  Descriptions,
  DescriptionsItem,
  Popconfirm,
} from 'ant-design-vue';

import Edit from './components/Edit.vue';

const editRef = ref<InstanceType<typeof Edit>>();

function handleDelete() {}
</script>

<template>
  <Page description="管理合作的KOL资源，创建和维护KOL档案" title="KOL管理">
    <template #extra>
      <Button
        :icon="
          h(MdiPlus, { class: 'inline-block mr-1 text-lg -translate-y-[1px]' })
        "
        type="primary"
        @click="editRef?.open()"
      >
        创建 KOL
      </Button>
    </template>

    <section class="grid grid-cols-3 gap-4">
      <Card v-for="item in 12" :key="item" title="KOL名称">
        <template #extra>
          <div class="space-x-2">
            <Button
              :icon="
                h(MdiEdit, {
                  class: 'inline-block mr-1 text-lg -translate-y-[2px]',
                })
              "
              size="small"
              type="primary"
            >
              查看
            </Button>

            <Button
              :icon="
                h(MdiEdit, {
                  class: 'inline-block mr-1 text-lg -translate-y-[2px]',
                })
              "
              size="small"
              type="dashed"
            >
              编辑
            </Button>

            <Popconfirm title="您确认要删除这个KOL吗?" @confirm="handleDelete">
              <Button
                :icon="
                  h(MdiDelete, {
                    class: 'inline-block mr-1 text-lg -translate-y-[2px]',
                  })
                "
                danger
                size="small"
              >
                删除
              </Button>
            </Popconfirm>
          </div>
        </template>

        <Descriptions :column="2">
          <DescriptionsItem label="KOL名称">佳东</DescriptionsItem>
          <DescriptionsItem label="平台">抖音</DescriptionsItem>
          <DescriptionsItem label="类别">美妆护肤</DescriptionsItem>
          <DescriptionsItem label="报价">5000-8000</DescriptionsItem>
          <DescriptionsItem label="个人简介">
            专注美妆护肤分享，真实测评，不接受虚假宣传。擅长日系、韩系妆容教程。
          </DescriptionsItem>
        </Descriptions>

        <p class="text-right text-xs text-gray-400">
          创建时间：2025/0803 12:00:00
        </p>
      </Card>
    </section>

    <Edit ref="editRef" />
  </Page>
</template>
